import React from 'react';
import {View, StyleSheet, ScrollView, TouchableOpacity} from 'react-native';
import AntDesign from 'react-native-vector-icons/AntDesign';
import { useNavigation } from '@react-navigation/native';
import { 
  ResponsiveContainer, 
  ResponsiveText,
  scale,
  Sizes 
} from '../components';

const menuItems = [
  {id: 1, title: '我的订单', icon: 'profile', navigateTo: 'Orders'},
  {id: 2, title: '收货地址', icon: 'enviromento', navigateTo: ''},
  {id: 3, title: '客户服务', icon: 'customerservice', navigateTo: 'FAQ'},
  {id: 4, title: '关于我们', icon: 'infocirlceo', navigateTo: ''},
];

const ProfileScreen = () => {
  const navigation = useNavigation();

  const handleMenuPress = (navigateTo: string) => {
    if (navigateTo) {
      navigation.navigate(navigateTo);
    }
  };

  return (
    <ResponsiveContainer>
      <ScrollView style={styles.container}>
        <View style={styles.header}>
          <View style={styles.avatarContainer}>
            <View style={styles.avatar} />
            <View style={styles.userInfo}>
              <ResponsiveText variant="large" weight="bold" style={styles.userName}>用户名</ResponsiveText>
              <ResponsiveText variant="small" color="#999" style={styles.userLevel}>普通会员</ResponsiveText>
            </View>
          </View>
          
          <TouchableOpacity style={styles.settingsButton}>
            <AntDesign name="setting" size={scale(24)} color="#333" />
          </TouchableOpacity>
        </View>
        
        <View style={styles.statsContainer}>
          <View style={styles.statItem}>
            <ResponsiveText variant="large" weight="bold" style={styles.statValue}>0</ResponsiveText>
            <ResponsiveText variant="small" color="#666" style={styles.statLabel}>收藏</ResponsiveText>
          </View>
          <View style={styles.statItem}>
            <ResponsiveText variant="large" weight="bold" style={styles.statValue}>0</ResponsiveText>
            <ResponsiveText variant="small" color="#666" style={styles.statLabel}>关注</ResponsiveText>
          </View>
          <View style={styles.statItem}>
            <ResponsiveText variant="large" weight="bold" style={styles.statValue}>0</ResponsiveText>
            <ResponsiveText variant="small" color="#666" style={styles.statLabel}>足迹</ResponsiveText>
          </View>
          <View style={styles.statItem}>
            <ResponsiveText variant="large" weight="bold" style={styles.statValue}>0</ResponsiveText>
            <ResponsiveText variant="small" color="#666" style={styles.statLabel}>优惠券</ResponsiveText>
          </View>
        </View>
        
        <View style={styles.orderSection}>
          <View style={styles.sectionHeader}>
            <ResponsiveText variant="medium" weight="bold" style={styles.sectionTitle}>我的订单</ResponsiveText>
            <TouchableOpacity 
              style={styles.viewAllButton}
              onPress={() => handleMenuPress('Orders')}
            >
              <ResponsiveText variant="small" color="#999" style={styles.viewAllText}>查看全部</ResponsiveText>
              <AntDesign name="right" size={scale(14)} color="#999" />
            </TouchableOpacity>
          </View>
          
          <View style={styles.orderTypes}>
            <View style={styles.orderTypeItem}>
              <AntDesign name="wallet" size={scale(28)} color="#4CAF50" />
              <ResponsiveText variant="small" color="#666" style={styles.orderTypeText}>待付款</ResponsiveText>
            </View>
            <View style={styles.orderTypeItem}>
              <AntDesign name="car" size={scale(28)} color="#4CAF50" />
              <ResponsiveText variant="small" color="#666" style={styles.orderTypeText}>待发货</ResponsiveText>
            </View>
            <View style={styles.orderTypeItem}>
              <AntDesign name="inbox" size={scale(28)} color="#4CAF50" />
              <ResponsiveText variant="small" color="#666" style={styles.orderTypeText}>待收货</ResponsiveText>
            </View>
            <View style={styles.orderTypeItem}>
              <AntDesign name="message1" size={scale(28)} color="#4CAF50" />
              <ResponsiveText variant="small" color="#666" style={styles.orderTypeText}>待评价</ResponsiveText>
            </View>
            <View style={styles.orderTypeItem}>
              <AntDesign name="exception1" size={scale(28)} color="#4CAF50" />
              <ResponsiveText variant="small" color="#666" style={styles.orderTypeText}>退款/售后</ResponsiveText>
            </View>
          </View>
        </View>
        
        <View style={styles.menuSection}>
          {menuItems.map(item => (
            <TouchableOpacity 
              key={item.id} 
              style={styles.menuItem}
              onPress={() => handleMenuPress(item.navigateTo)}
            >
              <View style={styles.menuLeft}>
                <AntDesign name={item.icon} size={scale(20)} color="#4CAF50" style={styles.menuIcon} />
                <ResponsiveText variant="medium" color="#333" style={styles.menuTitle}>{item.title}</ResponsiveText>
              </View>
              <AntDesign name="right" size={scale(16)} color="#999" />
            </TouchableOpacity>
          ))}
        </View>
      </ScrollView>
    </ResponsiveContainer>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    padding: Sizes.spacingXL,
    backgroundColor: '#fff',
  },
  avatarContainer: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  avatar: {
    width: scale(60),
    height: scale(60),
    borderRadius: scale(30),
    backgroundColor: '#e0e0e0',
  },
  userInfo: {
    marginLeft: Sizes.spacingMedium,
  },
  userName: {
    marginBottom: Sizes.spacingTiny,
  },
  userLevel: {
    color: '#999',
  },
  settingsButton: {
    padding: Sizes.spacingTiny,
  },
  statsContainer: {
    flexDirection: 'row',
    backgroundColor: '#fff',
    marginTop: Sizes.spacingRegular,
    paddingVertical: Sizes.spacingMedium,
  },
  statItem: {
    flex: 1,
    alignItems: 'center',
  },
  statValue: {
    marginBottom: Sizes.spacingTiny,
  },
  statLabel: {
    color: '#666',
  },
  orderSection: {
    backgroundColor: '#fff',
    marginTop: Sizes.spacingRegular,
    padding: Sizes.spacingMedium,
  },
  sectionHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: Sizes.spacingMedium,
  },
  sectionTitle: {
    fontWeight: 'bold',
  },
  viewAllButton: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  viewAllText: {
    marginRight: Sizes.spacingTiny,
  },
  orderTypes: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  orderTypeItem: {
    alignItems: 'center',
  },
  orderTypeText: {
    marginTop: Sizes.spacingSmall,
  },
  menuSection: {
    backgroundColor: '#fff',
    marginTop: Sizes.spacingRegular,
    marginBottom: Sizes.spacingXL,
  },
  menuItem: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    padding: Sizes.spacingMedium,
    borderBottomWidth: 1,
    borderBottomColor: '#f0f0f0',
  },
  menuLeft: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  menuIcon: {
    marginRight: Sizes.spacingRegular,
  },
  menuTitle: {
    color: '#333',
  },
});

export default ProfileScreen; 